<template>
  <div class="emoji-list" :style="`left:${pos.x}px;top:${pos.y}px`">
    <div v-for="(item, index) in data.split(',')" @click="emojiClick(item)">{{ item }}</div>
  </div>
</template>

<script>
export default {
  name: 'emoji',
  props: {
    data: {
      type: String,
      default: () =>
        '😃,😄,😁,😆,😅,🤣,😂,🙂,😉,😊,😇,😕,😟,😮,😲,🥺,😦,😨,😭,😱,😣,😞,😩,😤,😡,😠,😍,😘,😜,🤪,🤭,🤫,🤔,😑,😪,😷,🤮,🤧,😵,😎,💩,🤖,🙈,🙉,🙊,💖,💔,💋,💯,💢,💨,💤,🖐,👌,🤟,🤙,👈,👉,👆,👇,👍,✊,👏,🙌,🤝,🙏,👄,🍉,🧀,🍔,🍚,🍵,🍺,🍻,🥂'
    },
    pos: {
      type: Object,
      default: () => {
        return {
          x: 12,
          y: -263
        }
      }
    }
  },
  methods: {
    emojiClick(item) {
      this.$emit('sendEmoji', item)
    }
  }
}
</script>

<style>
.emoji-list {
  position: absolute;
  left: 12px;
  top: -263px;
  z-index: 100;
  width: 512px;
  height: 256px;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.emoji-list div {
  cursor: pointer;
  font-size: 24px;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}
</style>
